<template>
  <div class="hello">
    <div class="upload_img show-img" v-for="(item, index) in urlImg" :key="index" @click="delImg(index)" style="margin-bottom: 10px;">
      <div class="delet">删除图片</div>
      <img :src="item.url" />
    </div>
    <div class="upload_img" v-show="urlImg.length < 1" @click="fileClick(-1)">
      <div class="up">上传图片</div>
    </div>
    <!-- <div v-if="up_type == 'bin'">
      <el-button class="bt-color-tjd" @click="fileClick" type="primary">
        {{!name?'上传文件':'更换文件'}}
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <span style="margin-left: 10px;">{{name}}</span>
    </div> -->
    <div class="upload">
      <input
        @change="fileChange($event)"
        type="file"
        :id="up_type"
        :accept="up_type != 'bin'?'.jpg, .png, .bmp, .jpeg':'.bin'"
        multiple
        style="display: none"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    urlImg: {
      type: Array,
      default: () => { return []; }
    },
    name: {
      type: String,
      default: () => { return ""; }
    },
    up_type: {
      type: String,
      default: () => { return "img"; }
    }
  },
  data() {
    return {
      accept: ".jpg, .png, .bmp, .jpeg",
      num: 0
    };
  },
  methods: {
    delImg(num) {
      this.$emit("chang_up", '', num);
    },
    fileClick(num) {
      this.num = num
      document.getElementById(this.up_type).click();
    },
    fileChange(el) {
      if (!el.target.files[0].size) return;
      this.fileList(el.target);
      el.target.value = "";
    },
    fileList(fileList) {
      let files = fileList.files;
      for (let i = 0; i < files.length; i++) {
        //判断是否为文件夹
        if (files[i].type != "") {
          this.fileAdd(files[i]);
        } else {
          //文件夹处理
          this.folders(fileList.items[i]);
        }
      }
    },
    //文件夹处理
    folders(files) {
      let _this = this;
      //判断是否为原生file
      if (files.kind) {
        files = files.webkitGetAsEntry();
      }
      files.createReader().readEntries(function(file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i]);
          } else {
            _this.folders(file[i]);
          }
        }
      });
    },
    foldersAdd(entry) {
      let _this = this;
      entry.file(function(file) {
        _this.fileAdd(file);
      });
    },
    fileAdd(file) {
      //总大小
      this.size = file.size;
      //判断是否为图片文件
      let reader = new FileReader();
      reader.vue = this;
      reader.readAsDataURL(file);
      reader.onload = function() {
        file.src = this.result;
        if (file.name.split(".")[1] == "bin") {
            this.vue.$emit("chang_bin", file);
        } else {
          this.vue.$emit("chang_up", file, this.vue.num);
        }
      };
    }
  }
};
</script>
<style>
.upload_img {
  position: relative;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border: 1px solid #999;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
}
.show-img {
  width: 100%;
}
.show-img img {
  height: 120px;
  max-width: 100%;
}
.upload_bin {
  width: 100px;
  height: 100px;
}

.up,
.delet {
  position: absolute;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.upload_img:hover .delet {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}
.delet {
  position: absolute;
  width: 100%;
  top: 120px;
  background-color: rgba(0, 0, 0, 0);
}
.upload_img img {
  height: 120px;
}
</style>
